<template>
    <el-container class="index-container">
        <!-- 头部区域 2222-->
        <el-header>
            <span style="font-size: 20px ;color: #409eff;font-weight: bold">
                工具合集网
                <span style="font-size: 18px">Tools Collection Website</span>
            </span>
            <span style="margin-right: 60px">
                <el-dropdown>
                    <span style="font-size: 14px;cursor: pointer;">{{username ? username : '用户名'}}
                        <i class="el-icon-caret-bottom" style="margin-right: 15px"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <!--<el-dropdown-item>个人中心</el-dropdown-item>-->
                        <el-dropdown-item >
                            <span @click="logoutUser()">退出登录</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
        </el-header>
        <!-- 页面主体区域 -->
        <el-container style=" border: 1px solid #eee">
            <!-- 页面侧边区域 -->
            <el-aside width="210px">
                <el-checkbox style="margin-left: 24px" v-model="isCollapse">{{isCollapse===true?"展开":"收起"}}</el-checkbox>

                <el-menu router :default-openeds="this.$router.path" class="el-menu-vertical-demo"
                         background-color="white"
                         default-active="/hot"
                         @close="handleClose" :collapse="isCollapse">
                    <el-menu-item v-for="(menu,index) in menuArr" :key="index" :index="menu.path">
                        <i :class="menu.modal"></i>
                        <span slot="title">{{menu.title}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 右侧主体区域 -->
            <el-main>
                <router-view />
            </el-main>

        </el-container>

    </el-container>
</template>

<script>
import { mapState } from "vuex";

export default {
    computed: {
        ...mapState({
            //从数据仓库中取出数据
            username: (state) => state.auth.user.username,
        }),
    },
    data() {
        return {
            flag: true,
            isCollapse: false,
            menuArr: [
                {
                    id: "1",
                    title: "今日计划",
                    modal: "el-icon-tickets",
                    path: "/plan"
                },

                {
                    id: "2",
                    title: "今日热点",
                    modal: "el-icon-news",
                    path: "/hot"
                },
                {
                    id: "3",
                    title: "今日内容",
                    modal: "el-icon-document",
                    path: "/content"
                },
                {
                    id: "4",
                    title: "今日账本",
                    modal: "el-icon-notebook-1",
                    path: "/keepAcc"
                },
                {
                    id: "5",
                    title: "我的笔记",
                    modal: "el-icon-edit-outline",
                    path: "/note"
                },
            ]
        };
    },
    methods: {
        aaa(flag) {
            alert(flag)

        },
        handleOpen(key, keyPath) {
            //console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            //console.log(key, keyPath);
        },
        logoutUser() {
            // console.log(this.username);
            // return;
            // debugger;
            this.$store.dispatch("AUTH_LOGOUT2");
        },
    },
    mounted() {
        // 默认打开 热点页面
        this.$router.push({ path: '/hot'});
    }

}
</script>

<style lang="less" scoped>

.index-container {
    height: 100vh;
}

.el-header {
    background-color: white;
    color: black;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.el-aside {
    background-color: white;

    .el-menu-vertical-demo:not(.el-menu--collapse) {
        width: 200px;
        min-height: 400px;
    }
}

.el-main {
    background-color:#f8f9fa;
}
</style>
